<div class="overflow-x-auto rounded border border-gray-300 shadow-sm dark:border-gray-600">
  <table class="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900 dark:*:text-white">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>
